<template>
    <view class="guishu">
        <view class="zuncheng">
            <view style="color: blue;" @click="guanbi">关闭</view>
            <view>选择成员</view>
            <view></view>
        </view>
        <view class="gui_shu">

            <view style="margin-top: 10px; width: 330px; margin-left: 20px;"> <u-search borderColor="#ccc" placeholder="搜索"
                    bgColor="#fff" :showAction="false"></u-search></view>
            <view style="margin-top: 10px;">
                <u-index-list :index-list="indexList">
                    <template v-for="(item, index) in itemArr">
                        <u-index-item>
                            <u-index-anchor :text="indexList[index]"></u-index-anchor>
                            <view class="list-cell" v-for="(cell, index) in list" :key="index" @click="guanbi">
                                <view>
                                    <img :src="cell.img" alt="" style="vertical-align: middle; width: 40px; height: 40px;">

                                </view>
                                <view>
                                    <p> {{ item.name }}</p>
                                    <p style="color: #666;"> {{ item.price }}</p>
                                </view>
                            </view>
                        </u-index-item>
                    </template>
                </u-index-list>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const guanbi = () => {
    uni.navigateBack({
        delta: 1
    })
}
const indexList = ref(['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']);
const itemArr = ref([
    { id: 0, name: "员工姓名", price: "销售部/销售部经理" },
    { id: 1, name: "员工姓名", price: "销售部/销售部经理" },
    { id: 2, name: "员工姓名", price: "销售部/销售部经理" },
    { id: 3, name: "员工姓名", price: "销售部/销售部经理" },
    { id: 4, name: "员工姓名", price: "销售部/销售部经理" },

])
const list = ref([
    { img: "/static/img/11.png" },
    { img: "/static/img/11.png" },
    { img: "/static/img/11.png" },
]);
</script>

<style lang="scss">
.u-index-list__letter {
    margin-top: 0px;
}

.list-cell {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 24rpx;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    border: 1px solid #ccc;
}

.gui_shu {
    background-color: rgb(249, 249, 249);
    height: 950px;
}

#display {
    display: none;

}

.zuncheng {
    display: flex;
    margin-top: 50px;
    justify-content: space-between;
    padding: 10px 10px;
    border-bottom: 1px solid #ccc;
}
</style>